<template>
  <el-dialog title='操作日志详细' :visible="showDialog" width="40%" :before-close="handleClose" :close-on-click-modal="false">
    <div class="content">
      <el-row>
        <el-col :span="12">
          <span class="content-title">操作模块：</span>
          <span class="content-name">{{ row.title }}</span>
        </el-col>
        <el-col :span="12">
          <span class="content-title">请求地址：</span>
          <span class="content-name">{{ row.operUrl }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span class="content-title">登录信息：</span>
          <span class="content-name">{{ row.operIp }}</span>
        </el-col>
        <el-col :span="12">
          <span class="content-title">请求方式：</span>
          <span class="content-name">{{ row.requestMethod }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <span class="content-title">操作方法：</span>
          <span class="content-name">{{ row.method }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <span class="content-title">操作方法：</span>
          <span class="content-name">{{ row.businessType }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <span class="content-title">返回参数：</span>
          <span class="content-name">{{ row.jsonResult }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span class="content-title">操作状态：</span>
          <span class="content-name">{{ row.sta }}</span>
        </el-col>
        <el-col :span="12">
          <span class="content-title">操作时间：</span>
          <span class="content-name">{{ row.createTime }}</span>
        </el-col>
      </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button class="cancel" @click="handleClose">返 回</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['showDialog'],
  data() {
    return {
      title: '',
      row: {},
    };
  },
  methods: {
    handleClose() {
      this.$emit('update:showDialog', false)
    },
  }
}
</script>

<style lang='scss' scoped>
.content {
  width: 100%;
  min-height: 300px;
  max-height: 500px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding: 10px;

}

.content-title {
  color: #606266;
  font-size: 15px;
  font-weight: 600;
  line-height: 40px;
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;
}

.cancel {

  border-radius: 5px;
  position: relative;
  line-height: 20px;
  text-align: center;
  font-size: 14px;

  &:hover,
  &:focus {
    background: rgba($color: #e8f4ff, $alpha: 1) !important;
    border: 1px solid #0e7b67 !important;
    color: #0e7b67 !important;
  }

}
</style>
